import { Component } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import renderModal, {
    getModelValue,
    initModelValue,
    renderForm,
    type FormModalDto
} from '@/components/modal/Modal'
import { getKeyToEnum, InsurePlanTypeCnEnum, InsureTypeCnEnum, OccupationLevelCnEnum, ValidRuleTypeCnEnum } from '@/const/enum'
import type { InsureEnsurePlanDto } from '@/api/insureEnsurePlan/types'
import { getInsureCompanyPlans } from '@/api/insureEnsurePlan'

export type BasicInfoDataDto = Pick<InsureEnsurePlanDto, 'planName' | 'insureCompanyId' | 'insureType' | 'insureCompanyPlanId' | 'dangerLevel' | 'insurePlanType' | 'effectType' | 'ruleId' | 'ruleName'> & {
    insureCompanyName: string
}

@Component({
    emits: ['submit', 'reset']
})
export class BasicInfoView extends Render {

    formConfig = this.initFormConfig() as FormModalDto

    insureCompanyName = ''
    ruleName = ''

    initFormConfig() {
        return {
            title: '',
            width:'640px',
            theme: 'dark',
            show: false,
            labelCol: {
                style: {
                    width: '10em'
                }
            },
            params: {
                confirmText:'确定',
            },
            items: {
                planName: {
                    name: '方案简称',
                    element: 'input',
                    required:true,
                },
                insureCompanyId: {
                    name: '保司选择',
                    required:true,
                    element: 'select',
                    optionsType: 'insureCompanyId',
                    callback: {
                        change: async (ev: number) => {
                            this.insureCompanyName = ev ? this.formConfig.items.insureCompanyId.options?.find(i => i.value === ev)?.label : ''

                            this.formConfig.items.insureCompanyPlanId.hidden = !ev
                            this.formConfig.items.insureCompanyPlanId.value = ''
                            this.formConfig.items.insureCompanyPlanId.options = ev ? (await getInsureCompanyPlans({
                                insureCompanyId: ev
                            })).map(i => {
                                return {
                                    label: i.key,
                                    value: i.value
                                }
                            }) : []
                        }
                    }
                },
                insureType: {
                    name: '产品类型',
                    element: 'select',
                    defaultValue: InsureTypeCnEnum.长期保,
                    options: getKeyToEnum(InsureTypeCnEnum, false, ['长期保']),
                    readonly: true
                },
                // channel: {
                //     name: '渠道来源',
                //     element:'input'
                // },
                insureCompanyPlanId: {
                    name: '保司方案',
                    element: 'select',
                    required:true,
                    hidden: true,
                },
                dangerLevel: {
                    name: '风险等级',
                    element: 'checkboxGroup',
                    required:true,
                    options: getKeyToEnum(OccupationLevelCnEnum)
                },
                insurePlanType: {
                    name: '方案类型',
                    element: 'select',
                    required: true,
                    defaultValue: InsurePlanTypeCnEnum.灵活保单,
                    options: getKeyToEnum(InsurePlanTypeCnEnum),
                },
                effectType: {
                    name: '生效方式',
                    element: 'radioGroup',
                    required:true,
                    options: getKeyToEnum(ValidRuleTypeCnEnum)
                },
                ruleId: {
                    name: '方案规则',
                    element: 'select',
                    required: true,
                    optionsType: 'insureCompanyRule',
                    callback: {
                        change: (ev: number) => {
                            this.ruleName = ev ? this.formConfig.items.ruleId.options?.find(i => i.value === ev)?.label : ''
                        }
                    }

                }
                // 暂时不要
                // rule: {
                //     name: '方案名称命名规则',
                //     element: 'customInsurancePlanName',
                //     params: {
                //         options: [{
                //             value: 0,
                //             label: '自定义',
                //         },{
                //             value: 1,
                //             label: '月份',
                //         },{
                //             value: 2,
                //             label: '自然年',
                //         },{
                //             value: 3,
                //             label: '公司',
                //         },{
                //             value: 4,
                //             label: '风险等级',
                //         },],
                //         tips:'预览信息涉及到的系统数据，都是当前时间端“10-苏州蓝豚跃动信息科技有限公司2024 ”'
                //     }
                // }
            },
            complete: async () => {
                const data = getModelValue(this.formConfig)
                console.log(data, 'datadata')
                this.formConfig.show = false
                // this.showChange(false)
            },
            cancel: () => {
                this.formConfig.show = false
                // this.showChange(false)
            },
            init: () => {
                initModelValue(this.formConfig)
            }
        } as FormModalDto
    }
    basicForm = {
        validate: async () => {},
        clear: () => {},
        element: () => <> </>
    }

    async submit() {
        await this.basicForm.validate()
        const data = getModelValue(this.formConfig)
        return {
            ...data,
            insureCompanyName: this.insureCompanyName,
            ruleName: this.ruleName
        } as BasicInfoDataDto
    }

    reset() {
        console.log('reset1')
        initModelValue(this.formConfig)
        this.basicForm.clear()
    }
    
    created() { 
        this.basicForm = renderForm(this.formConfig)
    }
    render() {
        return < >
            { this.basicForm.element() }
        </>
            
    }
}

export default toNative<{}, {}>(BasicInfoView)